﻿@model IEnumerable<UserWithRole>
    @{
    ViewData["Title"] = "用户管理";
    }
    @section PYhead{
    <link href="~/css/Account.css" type="text/css" rel="stylesheet">
    <link href="~/css/user-admin.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="~/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="~/js/jquery-ui.min.js"></script>

    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

            table td,
            table th {
                width: 117px;
                height: 45px;
                font-size: 10px;
                text-align: center;
                color: #666;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            table thead th {
                background-color: #CCE8EB;
                width: 100px;
            }

            table tr {
                background: #fff;
                box-shadow: 0px 0px 1px gray;
            }

                table tr td a {
                    color: rgb(0, 174, 255);
                    cursor: pointer;
                }

        #Editor {
            width: 400px;
            position: fixed;
            box-shadow: 0 0 1px gray;
            background-color: white;
            left: calc(50% - 200px);
            top: calc(50% - 250px);
            display: none;
        }

            #Editor p {
                float: right;
                margin-right: 50px;
                color: rgb(0, 174, 255);
                cursor: pointer;
            }

        label {
            display: inline-block;
            margin-left: 20px;
            width: 50px;
        }

        .select {
            margin-left: 20px;
            margin-top: 25px;
            font-size: 15px;
            width: 255px;
            height: 45px;
            text-align: center;
            text-indent: 100px;
            border-radius: 8px;
        }

            .select option {
                padding-top: 5px;
                padding-bottom: 5px;
                height: 45px;
                font-size: 15px;
            }

        body {
            min-width: 800px;
        }
    </style>
    }
    <div id="Editor">
        <br />
        <p><a onclick="cl()">[X]</a></p>
        <br />
        <form asp-for="UserEdit" method="post">
            <label for="name">用户名</label>
            <input type="text" class="inputer" style=" width:250px" id="name" name="username" value="">
            <br>
            <label for="email">邮箱</label>
            <input type="text" class="inputer" style=" width:250px" id="email" name="email" value="">
            <br>
            <label for="group">用户组</label>
            <select class="select" id="group" name="group">
                <option value="User">用户</option>
                <option value="Admin">管理</option>
            </select>
            <button type="button" onclick="editSub()" style="margin-top: 50px;" class="subm" name="submiter">修改</button>
        </form>
    </div>
    <table class="table">
        <tr>
            <th>用户名</th>
            <th>UID</th>
            <th>注册邮箱</th>
            <th>注册时间</th>
            <th>权限组</th>
            <th>操作</th>
        </tr>
        @foreach (var u in Model)
        {
        <tr>
            <td>@u.UserName</td>
            <td>@u.Id</td>
            <td>@u.Email</td>
            <td>@u.RegistTime</td>
            <td>@u.role</td>
            <td><a onclick="edit(@u.Id)">修改</a>|<a onclick="ConfirmDel(@u.Id)">删除</a></td>
        </tr>
        }
    </table>
    <script>
        function ConfirmDel(id) {
            var a = confirm("确认删除？（操作不可逆）");
            if (a == true) {
                $.ajax({
                    url: "/AcMana/UserDelete",
                    async: false,
                    type: "post",
                    data: {
                        Id:id
                    },
                    dataType: "text",
                    success: function (response) {
                        response = JSON.parse(response);
                        alert(response);
                        window.location.reload();
                    }
                });
            } else {
                return;
            }
        }

        function edit(id) {
            $("#Editor").css("display", "block");
            $.ajax({
                url: "/AcMana/UserEdit/" + id,
                async: false,
                dataType: "text",
                data: {
                    UserId : id
                },
                type: "get",
                success: function (data) {
                    ajaxobj = eval("(" + data + ")");
                    document.getElementById("name").value = ajaxobj.userName;
                    document.getElementById("email").value = ajaxobj.email;
                    document.getElementById("group").value = ajaxobj.group;
                }
            });
        }
        function cl() {
            $("#Editor").css("display", "");
        }
        function editSub() {
            $.ajax({
                url: "/AcMana/UserEdit",
                async: false,
                data: {
                    UserName: $("#name").val(),
                    Email: $("#email").val(),
                    Role: $("#group option:selected").val()
                },
                type: "post",
                dataType: "text",
                success: function (response) {
                    alert("修改成功!");
                    window.location.reload()
                }
            });
        }
    </script>
